<template>
	<div>
		<el-table class="styleTable" :data="tableData.rows" style="width: 100%" :row-class-name="tableRowClassName">
			<div class="table" v-for="(item, index) in tableData.columns" :key="index">
				<el-table-column :prop="item" :label="item">
				</el-table-column>
			</div>
			<el-table-column width="70" align="right">
				<template slot="header" slot-scope="scope">
					<div class="styleTable-box" slot="headerRight">
						<el-popover placement="bottom-end" trigger="hover">
							<div class="styleTable_popover">
								<ul>
									<li @click="toExcel()">导出表格</li>
								</ul>
							</div>
							<div class="styleTable-box_btn" slot="reference">
								<i class="el-icon-more-outline"></i>
							</div>
						</el-popover>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<export-report ref="export_table"></export-report>
	</div>
</template>

<script>
	import exportReport from './export-report.vue'
	export default {
		components: {
			exportReport
		},
		props: {
			tableRowClassName: {},
			tableData: {},
			dataModel: null,
			apiUrl: null
		},
		methods: {
			toExcel() {
				this.$refs.export_table.popupChang(this.apiUrl, this.dataModel, this.tableData)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.styleTable {
		.styleTable-box {

			.el-dropdown {
				border: none;
			}

			.styleTable-box_btn {
				width: 40px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border-radius: 40px;
				background-color: #ffffff;
				cursor: pointer;
				box-shadow: 0px 3px 20px 0px rgba(113, 106, 202, 0.17);

				i {
					font-size: 14px;
				}

				&:hover {
					background-color: #36a3f7;

					i {
						color: #ffffff;
					}
				}
			}
		}
	}

	.styleTable_popover {
		cursor: pointer;
	}
</style>